.fade-enter-active,
.fade-leave-active {
  transition: all ease 200ms;
}

.slide-enter-active,
.slide-leave-active {
  transition: all ease 200ms;
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: all ease 200ms;
}

.slide-top-enter-active,
.slide-top-leave-active {
  transition: all ease 200ms;
}

.slide-bottom-enter-active,
.slide-bottom-leave-active {
  transition: all ease 300ms;
}

.slide-enter,
.slide-leave-to {
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter,
.slide-left-leave-to {
  transform: translate3d(-100%, 0, 0);
}

.slide-bottom-enter,
.slide-bottom-leave-to {
  transform: translate3d(0, 100%, 0);
}

.slide-top-enter,
.slide-top-leave-to {
  transform: translate3d(0, -100%, 0);
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}



@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}